import React, { Component } from 'react';
import PropTypes from 'prop-types';

import $ from 'jquery';
import '@/assets/js/scroll.js';
import styles from './AlarmScroll.less';

class AlarmScroll extends Component {

  componentDidMount() {
    $('#alarmScroll').myScroll({
      speed: 40, //数值越大，速度越慢
      rowHeight: 150 //li的高度
    });
  }

  render() {
    // const { noticeList } = this.state;
    // const data = [...this.props.data, ...this.props.data, ...this.props.data];
    const { data, title } = this.props;
    return (
      <>
        <div className={styles.header}>{title}</div>
        <div id='alarmScroll' className={styles.wrap}>
          <div className={styles.alarmScroll}>
            <ul className={styles.list}>
              {
                data.map((item, index) => {
                  return (
                    <li key={index}>
                      <div className={styles.title}>{'报警信息' + (index+1)}</div>
                      <div className={styles.content}>
                        {'报警源：' + item.source}<br/>
                        {'时　间：' + item.timestamp}<br/>
                        {'详　情：' + item.msgText}
                      </div>
                    </li>)
                })
              }
            </ul>
          </div>
        </div>
      </>
    )
  }
}

AlarmScroll.proTypes = {
  title: PropTypes.string,
  data: PropTypes.array.isRequired
}

export default AlarmScroll;
